Текст с градиентом

[Softlink]

Привет всем!

Часто приходится слышать вопросы, как быть с "затуханием" текста. Сегодня придумал совсем незамысловатый прием.

Весь фокус заключается в box-shadow.

Ссылка на пример http://alpatriott.ru/works/gradient-text/

Технология проста как три копейки. Вкладываем один див в другой. Вложенному диву задаем отрицательный z-index, а обертке ставим внутреннюю тень с нужным нам смещением. Чтобы тень была именно там, где мы хотим, а не по всему контуру, задаем ей отрицательное растяжение и за счет большого сдвига и рассеивания, у нас тень остается только там, где надо.

Вот собственно и все.

Плюсы:

1)текст полностью выделяемый

2)текстовый блок не выпадает из потока и в див-обертку можно добавлять любой контент(но затухания у него уже не будет)

3)затухание не зависит от размера блока и останется всегда там, где мы его добавили.

Минусы

1)из-за отрицательного z-index пришлось добавить значок курсора для текста(для явности)

2)в опере(11.52) получилось какое-то большое растяжение, в результате чего часть текста просто не видно.

3)не работает в ИЕ до 8 включительно (добавлено)

4)..?

Соответственно цвета и интенсивность можно выставить в параметрах тени.

Посмотрите, покритикуйте, может еще чего-нибудь добавим полезного.

[sigma77]

Softlink,

3) Не кроссбраузерно В ИЕ8 не работает.

А как тебе такой вариант:

http://jsfiddle.net/aeMMB/

[Softlink]

Softlink,

3) Не кроссбраузерно В ИЕ8 не работает.

А как тебе такой вариант:

http://jsfiddle.net/aeMMB/

Да и пусть не работает В ИЕ много чего не работает, что ж теперь)))

Про второй вариант знаю и он вполне себе хорош, но только там затруднительно текст выделяется. Я вот на это делал упор.

Попробуй выделить три строчки снизу, с первого раза, а потом также одним кликом сбросить выделение В общем именно это мне и не нравится.

[Great Rash]

Да и пусть не работает В ИЕ много чего не работает, что ж теперь)))

Моему начальству это объясните...

[Softlink]

Да и пусть не работает В ИЕ много чего не работает, что ж теперь)))

Моему начальству это объясните...

А если через PIE попробовать?

У меня так сложилось, что мне никогда не приходилось добиваться одинакового отображения в ИЕшках, потому им не пользовался ни разу.

[Great Rash]

PIE медленный, лучше локальные извращения.

Если у вас так сложилось, то это не значит, что у всех так сложилось и не надо сразу транспарант поднимать с надписью "В топку ИЕ, ура!". Хорошее решение - кроссбраузерное решение (пусть с деградацией). А если по другому, то это плохое решение.

P.S. Ну и как бы вот "текст с градиентом", а у вас затухание текста

[Softlink]

P.S. Ну и как бы вот "текст с градиентом", а у вас затухание текста

Ну это же js?

Так-то у Лебедева уже давненько придумали сделать градиентный текст.

И все равно в топку ИЕ. Ну чего под него извращаться-то?

И да, у меня не градиент, а именно затухание, все верно

[psywalker]

Привет всем!

Часто приходится слышать вопросы, как быть с "затуханием" текста. Сегодня придумал совсем незамысловатый прием.

Весь фокус заключается в box-shadow.

Ссылка на пример http://alpatriott.ru/works/gradient-text/

Технология проста как три копейки. Вкладываем один див в другой. Вложенному диву задаем отрицательный z-index, а обертке ставим внутреннюю тень с нужным нам смещением. Чтобы тень была именно там, где мы хотим, а не по всему контуру, задаем ей отрицательное растяжение и за счет большого сдвига и рассеивания, у нас тень остается только там, где надо.

Вот собственно и все.

Плюсы:

1)текст полностью выделяемый

2)текстовый блок не выпадает из потока и в див-обертку можно добавлять любой контент(но затухания у него уже не будет)

3)затухание не зависит от размера блока и останется всегда там, где мы его добавили.

Минусы

1)из-за отрицательного z-index пришлось добавить значок курсора для текста(для явности)

2)в опере(11.52) получилось какое-то большое растяжение, в результате чего часть текста просто не видно.

3)не работает в ИЕ до 8 включительно (добавлено)

4)..?

Соответственно цвета и интенсивность можно выставить в параметрах тени.

Посмотрите, покритикуйте, может еще чего-нибудь добавим полезного.

Ага, "круто", и потом твой z-index: -1 сыграет против тебя, в Опере косяки, ну и ИЕ ещё не пашет. Нее, дружище, не пойдёт.

Softlink,

3) Не кроссбраузерно В ИЕ8 не работает.

А как тебе такой вариант:

http://jsfiddle.net/aeMMB/

Да, вот это нормал, добавить ещё вот эту вещь и можно смело в бой

[Softlink]

Ага, "круто", и потом твой z-index: -1 сыграет против тебя, в Опере косяки, ну и ИЕ ещё не пашет.

Про ИЕ уже говорил. В Опере чуток интенсивнее тень. А что может быть плохого с индексом? У тебя есть обертка для этого блока, которая идет "на равных" со всеми блоками на сайте.

[psywalker]

Ага, "круто", и потом твой z-index: -1 сыграет против тебя, в Опере косяки, ну и ИЕ ещё не пашет.

Про ИЕ уже говорил. В Опере чуток интенсивнее тень. А что может быть плохого с индексом? У тебя есть обертка для этого блока, которая идет "на равных" со всеми блоками на сайте.

А ты сделай контейнер, обёртку и фон ему поставь или хотя бы просто своему контейнеру фон влепи

[Softlink]

А ты сделай контейнер, обёртку и фон ему поставь или хотя бы просто своему контейнеру фон влепи

А зачем, спрашивается, ставить фон обертке, когда его можно поставить блоку с текстом и получится тот же самый результат?

Короче, я не настаиваю, дело каждого - использовать или нет. Плюсы и минусы вроде обсудили.

[psywalker]

А ты сделай контейнер, обёртку и фон ему поставь или хотя бы просто своему контейнеру фон влепи

А зачем, спрашивается, ставить фон обертке, когда его можно поставить блоку с текстом и получится тот же самый результат?

Даже и не знаю, Сань, зачем вообще на сайтах люди ставят фоны элементам В след. раз я так и скажу заказчику, чтобы дизайнер не рисовал фон вообще, потому что в контенте у меня блоки будут с z-index: -1.

[Softlink]

Даже и не знаю, Сань, зачем вообще на сайтах люди ставят фоны элементам В след. раз я так и скажу заказчику, чтобы дизайнер не рисовал фон вообще, потому что в контенте у меня блоки будут с z-index: -1.

Ты наверное и не понял, о чем я говорил. Тот фон, который тебе нарисовал дизайнер для блока-обертки, ставь в блок текста и все дела. Как сейчас сделано, например.

[psywalker]

Даже и не знаю, Сань, зачем вообще на сайтах люди ставят фоны элементам В след. раз я так и скажу заказчику, чтобы дизайнер не рисовал фон вообще, потому что в контенте у меня блоки будут с z-index: -1.

Ты наверное и не понял, о чем я говорил. Тот фон, который тебе нарисовал дизайнер для блока-обертки, ставь в блок текста и все дела. Как сейчас сделано, например.

А елси у меня будет общий фон в блоке .wrapper, например?

[Softlink]

А елси у меня будет общий фон в блоке .wrapper, например?

Макс, я тебя не узнаю) Ну не задавать никакого фона для текстового блока. Все будет "насквозь просвечиваться" и отобразится твой фон, заданный для враппера.

Тут было не совсем правильное утверждение.

Edited October 28, 2011 by Softlink

[psywalker]

А елси у меня будет общий фон в блоке .wrapper, например?

Макс, я тебя не узнаю)

Зато я тебя узнаю)

http://jsfiddle.net/aeMMB/3/

[Softlink]

Зато я тебя узнаю)

http://jsfiddle.net/aeMMB/3/

http://jsfiddle.net/aeMMB/7/

[psywalker]

Зато я тебя узнаю)

http://jsfiddle.net/aeMMB/3/

http://jsfiddle.net/aeMMB/7/

Нет, дружище, извини, но все эти "опасные" игры не для меня.

Ты щас сделал костыль, который при плохой игре меня подведёт.

[Softlink]

Нет, дружище, извини, но все эти "опасные" игры не для меня.

Ты щас сделал костыль, который при плохой игре меня подведёт.

Насчет костыля спорно, но, думаю, на этом мы и завяжем Кому-то пригодится, кому-то нет. Кого-то пугают индексы, кого-то нет. Повторюсь - я не навязываю нисколько

[psywalker]

Нет, дружище, извини, но все эти "опасные" игры не для меня.

Ты щас сделал костыль, который при плохой игре меня подведёт.

Насчет костыля спорно, но, думаю, на этом мы и завяжем Кому-то пригодится, кому-то нет. Кого-то пугают индексы, кого-то нет. Повторюсь - я не навязываю нисколько

Да нее, ты не подумай ничего, я просто уже с этими отрицательными z-index: -1 натыкался на засаду не раз, и вспомни последний случай Алисы с исчезнувшими пэ, помнишь?

А так нужно конечно подумать, может как-то можно из всего этого выжать что-то стоящее и имеющее право на жизнь

[SelenIT]

А мне идея насчет тени понравилась! Как насчет такого варианта? Текст выделяется везде, включая IE9. Для IE8, по идее, можно допилить через filter:glow в кондкомах, а еще более старые обойдутся...

[psywalker]

А мне идея насчет тени понравилась! Как насчет такого варианта? Текст выделяется везде, включая IE9. Для IE8, по идее, можно допилить через filter:glow в кондкомах, а еще более старые обойдутся...

Ухты, вот это прикольно)

Слушай Илюх, а как ты считаешь, вот с этими z-index: -1 могут возникнуть серьёзные траблы и если да, то при каких условиях? И где их лучше использовать, а где нет?

[SelenIT]

Знаю железные грабли — body в FF2 (и ниже) . Но они вроде как уже несколько лет неактуальны.

Основания для настороженности всё равно есть. Вон я недавно пытался оптимизировать заголовок-ленту, сэкономив один псевдоэлемент — везде ожидаемо, а в IE8 сюрприз (в обратную сторону — не хочет, бяка, "нырять" под фон родителя). Ну и вообще z-ы такие ребята капризные, особенно когда position у предка по ходу редактирования может быть то static, то relative, то absolute — везде свои нюансы, и это еще не считая "особенностей" IE7 . Для основного контента блока я бы не ставил без крайней на то необходимости.

А для вспомогательных элементов, когда проблемные браузеры отсекаются по др. критериям (напр. фактом неподдержки теней), а охваченные отображают единообразно и в соответствии со спекой — отчего бы и не поюзать, в порядке "прогрессивного улучшения"?

[Softlink]

А мне идея насчет тени понравилась! Как насчет такого варианта? Текст выделяется везде, включая IE9. Для IE8, по идее, можно допилить через filter:glow в кондкомах, а еще более старые обойдутся...

Вполне себе прикольно Только не очень понятно, как сделать интенсивность и размер побольше) Поигрался с размерами блока и сдвигами, но получилось не совсем то, что хотел увидеть

[psywalker]

Знаю железные грабли — body в FF2 (и ниже) . Но они вроде как уже несколько лет неактуальны.

Основания для настороженности всё равно есть. Вон я недавно пытался оптимизировать заголовок-ленту, сэкономив один псевдоэлемент — везде ожидаемо, а в IE8 сюрприз (в обратную сторону — не хочет, бяка, "нырять" под фон родителя). Ну и вообще z-ы такие ребята капризные, особенно когда position у предка по ходу редактирования может быть то static, то relative, то absolute — везде свои нюансы, и это еще не считая "особенностей" IE7 . Для основного контента блока я бы не ставил без крайней на то необходимости.

Воо, вот и я про тоже и говорю.

А для вспомогательных элементов, когда проблемные браузеры отсекаются по др. критериям (напр. фактом неподдержки теней), а охваченные отображают единообразно и в соответствии со спекой — отчего бы и не поюзать, в порядке "прогрессивного улучшения"?

Т.е. ты имеешь ввиду псевдоэлементы? А, например какие нибудь отдельные блоки, может новостей или ещё чего нить? Вот как выше, со статьями?